/*
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-07-05 15:36:04
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-10-12 17:04:14
 * @FilePath: /legion-iot/src/pages/dashboard/index.jsx
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import { Modal, theme, Button, Progress, Card, Spin } from "antd";
import React, { useState, useEffect, useRef, Suspense } from "react";
import styles from "./index.less";
import { useLocation, useOutletContext, history } from "umi";
import Amap from "./components/Map";
import Safe from "./components/Safe";
import Overview from "./components/Overview";
import Micro from "./components/Micro";
import Superintend from "./components/Superintend";
import Firecontrol from "./components/Firecontrol";
import Verb from "./components/Verb";
import data from "./mock";
import Waring from "./components/Waring";
import Devices from "./components/Devices";
import { useFullscreen, useRequest, useTimeout } from "ahooks";
import {
  FullscreenOutlined,
  FullscreenExitOutlined,
  RollbackOutlined,
} from "@ant-design/icons";
import Rfidata from "./components/rfidata";
import Figdata from "./components/figdata";
import Aidata from "./components/aidata";
import { getFetch } from '@/utils/doFetch'

const color = {
  中: "#1a9c00",
  高: "#0274ff",
  低: "#ff4800",
};
const Layout = ({ defaultdata, setkey, colorBgSecondary, refs }) => {
  const [isFullscreen, { enterFullscreen, exitFullscreen, toggleFullscreen }] =
    useFullscreen(refs);

  const style = {
      style: {
        background: colorBgSecondary,
        pointerEvents: "fill",
        padding: 12,
        backdropFilter: "blur(4px)",
      },
    },
    [tab, settab] = useState("tabs1"),
    [iftype, ciftype] = useState({
      title: "",
      columns: [],
      path: "/vehicle-api/monitor/rfid_list",
    });

  const [numlist, setNumlist] = useState({
    tabs1: [
      {
        no: 1,
        devices: "室内消火栓箱",
        floor: "2",
        position: "如皋科技创业园1栋2单元2楼204",
        level: "高",
        time: "2023-06-12 11:25",
      },
    ],
    tabs2: [
      {
        no: 1,
        devices: "喷淋泵",
        floor: "1",
        position: "如皋科技创业园1栋1单元1楼104",
        level: "高",
        time: "2023-06-13 13:31",
      },
    ],
    tabs3: [
      {
        no: 1,
        devices: "喷淋管道",
        floor: "5",
        position: "如皋科技创业园1栋1单元5楼1204",
        level: "高",
        time: "2023-06-14 15:21",
      },
    ],
    tabs4: [
      {
        no: 1,
        devices: "水箱",
        floor: "2",
        position: "如皋科技创业园1栋3单元2楼1204",
        level: "高",
        time: "2023-07-12 14:12",
      },
    ],
    tabs5: [
      {
        no: 1,
        devices: "室内消火栓箱",
        floor: "2",
        position: "如皋科技创业园1栋2单元2楼1204",
        level: "高",
        time: "2023-06-12",
      },
    ],
  });

  useEffect(() => {
    getFetch({url:"/device/device_alarms",params:{}}).then(res=>{
      console.log(res?.data?.[0]);
      setNumlist(res?.data?.[0])
    })
  }, []);




  return (
    <div className={styles?.layout} style={{ pointerEvents: "none" }}>
      <div>
        <div
          style={{
            ...style.style,
            flex: 1.5,
          }}
        >
          <h2>消防安全评估</h2>
          <Safe data={defaultdata}></Safe>
        </div>
        <div
          style={{
            ...style.style,
            flex: 1.3,
          }}
        >
          <h2>消控室值班</h2>
          <Overview data={defaultdata}></Overview>
        </div>
        <div
          style={{
            ...style.style,
            flex: 1.4,
          }}
        >
          <h2>消防设施设备</h2>
          <Devices data={defaultdata}></Devices>
        </div>
        <div
          style={{
            ...style.style,
            flex: 0.8,
          }}
        >
          <h2>电动自行车</h2>
          <Waring data={defaultdata}></Waring>
        </div>
      </div>
      <div>
        <div
          style={{
            padding: 0,
            pointerEvents: "none",
            display: "flex",
            justifyContent: "center",
            flexDirection: "row",
          }}
        >
          <h1
            style={{
              background: colorBgSecondary,
              pointerEvents: "fill",
              padding: 12,
              backdropFilter: "blur(4px)",
              fontSize: 22,
              height: 48,
              color: color[defaultdata?.scoreLevel],
              borderRadius: 8,
              letterSpacing: 2,
              fontWeight: "bolder",
              display: "flex",
              alignItems: "center",
            }}
          >
            {defaultdata?.title}消防安全看板{" "}
            <Button
              type="link"
              icon={
                isFullscreen ? (
                  <FullscreenExitOutlined />
                ) : (
                  <FullscreenOutlined />
                )
              }
              style={{ marginLeft: 8 }}
              onClick={() => {
                toggleFullscreen();
              }}
            ></Button>
          </h1>
        </div>
        <div style={{ padding: 0, pointerEvents: "none" }}></div>
        <div
          style={{
            padding: 0,
            pointerEvents: "all",
            display: "flex",
            justifyContent: "center",
            flexDirection: "row",
            height: 240,
            flexShrink: 0,
            gap: 10,
            flex: "none",
          }}
        >
          <Card
            className="diys"
            style={{
              flex: 1,
              overflow: "hidden",
              backgroundColor: colorBgSecondary,
            }}
            tabList={[
              {
                tab: `报警(${numlist?.tabs1?.length})`,
                key: "tabs1",
              },
              {
                tab: `故障(${numlist?.tabs2?.length})`,
                key: "tabs2",
              },
              {
                tab: `异常(${numlist?.tabs3?.length})`,
                key: "tabs3",
              },
              {
                tab: `隐患(${numlist?.tabs4?.length})`,
                key: "tabs4",
              },
              {
                tab: `处理(${numlist?.tabs5?.length})`,
                key: "tabs5",
              },
            ]}
            tabProps={{
              tabBarStyle: { fontSize: "14px" },
            }}
            onTabChange={(val) => {
              settab(val);
            }}
          >
            <div style={{ padding: "2px 12px 0px 12px", height: "100%" }}>
              <Rfidata
                data={numlist[tab]}
                defaultdata={defaultdata}
              />
            </div>
          </Card>
        </div>
      </div>
      <div>
        <div {...style}>
          <h2>安全管理</h2>
          <Superintend data={defaultdata}></Superintend>
        </div>
        <div {...style}>
          <h2>消防维保</h2>
          <Firecontrol data={defaultdata}></Firecontrol>
        </div>
        <div {...style}>
          <h2>教育培训</h2>
          <Verb data={defaultdata}></Verb>
        </div>
        <div {...style}>
          <h2>微型消防站</h2>
          <Micro data={defaultdata}></Micro>
        </div>
      </div>
    </div>
  );
};

function Dashboard() {
  const { mode } = useOutletContext();
  const [dom, setdom] = useState(null);
  const [defaultdata, setDefaultdata] = useState(data.all);
  const [key, setkey] = useState("all");
  const refs = useRef(null);

  useEffect(() => {
    setDefaultdata(data[key]);
  }, [key]);

  const {
    token: { colorBgSecondary, colorBorder },
  } = theme.useToken();
  const location = useLocation();

  return (
    <Suspense
      fallback={
        <Spin
          style={{
            width: "100%",
            height: "calc(100vh - 24px)",
            maxHeight: "100%",
          }}
          className="center"
          tip="加载中..."
          spinning={true}
          size="large"
        ></Spin>
      }
    >
      <div
        id={"cons"}
        className={styles?.dashcontainer}
        style={{ boxShadow: `0 0 16px ${colorBorder}` }}
        ref={refs}
      >
        <Amap setkey={setkey} mode={mode}></Amap>

        <Layout
          colorBorder={colorBorder}
          colorBgSecondary={colorBgSecondary}
          dom={dom}
          defaultdata={defaultdata}
          refs={refs}
          setkey={setkey}
        ></Layout>
      </div>
    </Suspense>
  );
}

export default Dashboard;
